<template>
  <div class="baseSetting">
    <div class="form-content">
      <el-form ref="pageForm" :model="pageForm" :rules="rules" label-width="100px" size="small">
        <el-form-item label="开启寄存" prop="enableDeposit">
          <el-switch v-model="pageForm.enableDeposit" :active-value="true" :inactive-value="false" />
        </el-form-item>

        <el-form-item label="支取规则">
          <el-radio
            v-model="pageForm.crossStore"
            :label="false"
            class="current-input"
          >已寄存物品只可在寄存门店支取</el-radio>
          <br>
          <el-radio
            v-model="pageForm.crossStore"
            :label="true"
            class="current-input"
          >顾客可以跨门店支取已寄存的物品</el-radio>
        </el-form-item>

        <el-form-item label="过期规则">
          <el-radio v-model="pageForm.validTime" :label="0" class="current-input">寄存后永久有效</el-radio>
          <br>
          <el-radio v-model="pageForm.validTime" :label="1" class="current-input">
            寄存后
            <el-form-item style="display: inline-block" prop="validTimeInput">
              <el-input v-model="pageForm.validTimeInput" maxlength="10" class="input-width-100" />
            </el-form-item>天内有效
          </el-radio>
        </el-form-item>
        <el-form-item v-if="pageForm.validTime===1" label="免费续存">
          <el-radio v-model="pageForm.freeRenew" :label="0" class="current-input">不可免费续存</el-radio>
          <br>
          <el-radio v-model="pageForm.freeRenew" :label="1" class="current-input">
            寄存后顾客可免费续存
            <el-form-item style="display: inline-block" prop="freeRenewInput">
              <el-input v-model="pageForm.freeRenewInput" maxlength="10" class="input-width-100" />
            </el-form-item>次
          </el-radio>
        </el-form-item>
      </el-form>
    </div>
    <div class="item-rt colCCA">
      <el-button size="medium" type="primary" round @click.prevent="confirmOrderBtn()">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const validTimeInput = (rule, value, callback) => {
      if (this.pageForm.validTime !== 0) {
        if (value !== 0 && /^[0-9]*[1-9][0-9]*$/.test(value)) {
          callback()
        } else {
          callback(new Error('寄存天数应该大于0且为整数'))
        }
      } else {
        callback()
      }
    }
    const freeRenewInput = (rule, value, callback) => {
      if (this.pageForm.freeRenew === 0) {
        callback()
      } else {
        if (value && /^[0-9]*[1-9][0-9]*$/.test(value)) {
          callback()
        } else {
          callback(new Error('免费缓存天数应该大于0且为整数'))
        }
      }
    }
    return {
      shopId: 0,
      pageForm: {
        crossStore: true,
        enableDeposit: true,
        freeRenew: 0,
        shopId: 0,
        validTime: 0,
        validTimeInput: 0,
        freeRenewInput: 0
      },
      rules: {
        validTimeInput: [
          // 支付押金
          {
            validator: validTimeInput,
            trigger: ['blur']
          }
        ],
        freeRenewInput: [
          // 支付押金
          {
            validator: freeRenewInput,
            trigger: ['blur']
          }
        ],
        crossStore: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {},
  mounted() {
    this.flushPage()
  },
  methods: {
    /* 数据请求*/
    flushPage() {
      this.getBasicConfigReq()
    },
    /* 按钮点击*/
    confirmOrderBtn() {
      this.$refs.pageForm.validate(async valid => {
        if (valid) {
          // 处理数据
          const submitData = await this.preSubPostData()
          this.postBasicConfigReq(submitData)
        }
      })
    },
    /* other*/
    preSubPostData() {
      return new Promise(resolve => {
        const fromData = JSON.parse(JSON.stringify(this.pageForm))
        if (fromData.validTime) {
          fromData.validTime = parseFloat(fromData.validTimeInput)
        } else {
          fromData.validTime = 0
        }
        if (fromData.freeRenew) {
          fromData.freeRenew = parseFloat(fromData.freeRenewInput)
        } else {
          fromData.freeRenew = 0
        }
        resolve(fromData)
      })
    },
    // 数据请求
    postBasicConfigReq(reqData) {
      // 保存店铺配置
      const data = reqData
      delete data.freeRenewInput
      delete data.validTimeInput
      this.khReqMethod({
        url: '/depositAdmin/config/basicConfig',
        data,
        method: 'post',
        isLoading: true
      }).then(async res => {
        if (res.code === 0) {
          this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
        }
      })
    },
    // 获取店铺配置
    getBasicConfigReq() {
      const data = {
        shopId: this.shopId
      }
      this.khReqMethod({
        url: '/depositAdmin/config/basicConfig',
        data,
        method: 'get',
        isLoading: true,
        isParams: true
      }).then(async res => {
        const reqData = JSON.parse(JSON.stringify(res.data))
        // 处理validTimeInput和freeRenewInput字段
        if (reqData.validTime) {
          reqData.validTimeInput = reqData.validTime
          reqData.validTime = 1
        } else {
          reqData.validTimeInput = 1
          reqData.validTime = 0
        }
        if (reqData.freeRenew) {
          reqData.freeRenewInput = reqData.freeRenew
          reqData.freeRenew = 1
        } else {
          reqData.freeRenewInput = 1
          reqData.freeRenew = 0
        }
        this.pageForm = reqData
      })
    },
    /* 控制显示的隐藏*/
    componentActive(passData) {
      this.shopId = passData.shopId
      this.getBasicConfigReq()
    }
  }
}
</script>

<style scoped lang="scss">
  .baseSetting {
    padding: 0 10px;
    margin-top: 5px;
  }
  .item-rt {
    margin: 50px;
  }
</style>
